<template>
  <div class="divWarehouse divTaskRecieve">
    <div class="divHead box">
      <div class="searchForm">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="searchParams"
        >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
                label="任务编号"
                prop="code"
              >
                <el-input
                placeholder="请输入"
                v-model="searchParams.code"
                clearable
                />
              </el-form-item>
            </el-col>
          <el-col :span="6">
            <el-form-item
                label="货主名称"
                prop="ownerName"
              >
                <el-input
                placeholder="请输入"
                v-model="searchParams.ownerName"
                clearable
                />
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
                label="收货状态"
                prop="status"
              >
                <el-select
                v-model="searchParams.status"
                clearable
                placeholder="请选择"
                >
                    <el-option
                        v-for="item in taskReceiveStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="textRight">
              <base-button
                class="minorImportantButton btnSearch"
                @click="getList"
              >搜索</base-button>
              <base-button class="unimportanceButton" @click="btnResetClick">重置</base-button>
            </div>
          </el-col>
        </el-row>
        </el-form>
      </div>
    </div>
    <div class="divContent box">
      <div class="tableInfo">
        <base-button
          class="importantButton"
          @click="btnTaskReceiveFinishClick([])"
        >收货完成</base-button>
      </div>
      <div  v-if="tableData.length>0">
        <el-table
          :data="tableData"
          stripe
          border
          ref="table"
          style="width: 100%"
          v-loading="loading"
          :header-cell-style="{ background: '#f9f6ee' }"
           @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            align="center"
            width="68"
            label="序号"
          />
          <el-table-column
            prop="code"
            align="center"
            label="收货任务编号"
            width="160"
          />
          <el-table-column
            prop="receiptCode"
            align="center"
            label="入库单号"
            width="150"
          />
          <el-table-column
            prop="createName"
            align="center"
            label="创建人"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="200"
            sortable
          />
          <el-table-column
            prop="ownerName"
            align="center"
            label="货主名称"
            width="160"
          />
          <el-table-column
            prop="warehouseName"
            align="center"
            label="仓库名称"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="areaName"
            align="center"
            label="库区名称"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="planNum"
            align="center"
            label="预计到货数"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="收货状态"
            width="160"
            :filter-method="filterHandler"
            :filters="[{text: '待分配', value: 1}, {text: '收货中', value: 2}, {text: '收货完成', value: 3}, {text: '已取消', value: 4}]"
          >
            <template slot-scope="{row}">
              <span v-if="row.status === 1">待分配</span>
              <span v-if="row.status === 2">收货中</span>
              <span v-if="row.status === 3">收货完成</span>
              <span v-if="row.status === 4">已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="receiverName"
            align="center"
            label="收货人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="realNum"
            align="center"
            label="实收总数"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="differenceNum"
            align="center"
            label="收货差异"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="completionTime"
            align="center"
            label="收货完成时间"
            width="200"
            sortable
          />
          <el-table-column label="操作" align="center" width="250" fixed="right">
            <template slot-scope="{row}">
              <base-button class="fontOperateButton" v-if="row.status === 1" @click="btnDistributeClick(row.id)">分配</base-button>
              <base-button class="fontOperateButton" v-if="row.status > 2" @click="btnViewDetail(row.masterId)">查看详情</base-button>
              <base-button class="fontOperateButton" v-if="row.status === 2" @click="btnTaskReceiveAddClick(row.masterId)">收货录入</base-button>
              <base-button class="fontOperateButton" v-if="row.status === 2" @click="btnTaskReceiveFinishClick([row.id])">收货完成</base-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
      </div>
      <div
        v-else
        class="emptyTip"
      >
        <span class="imgIcon"></span>
        <p>暂无收货任务</p>
      </div>
      <base-list-dialog :visible="batchDialogData.visible"
                        :title="batchDialogData.title"
                        :subTitle="batchDialogData.subTitle"
                        :msg="batchDialogData.msg"
                        :itemList="batchDialogData.itemList"
                        :msgFailure="batchDialogData.msgFailure"
                        :itemListFailure="batchDialogData.itemListFailure"
                        @btn-sure-click="btnSureClick"
                        >
      </base-list-dialog>
      <distribute-user-dialog   :visible="distributeUserDialogData.visible"
                                @handlesubmit="handlesubmit"
                                @handleclose ="distributeUserDialogData.visible = false">
      </distribute-user-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import BaseListDialog from '@/components/base-dialog/index1.vue'
import { ICommonReturn, ICommonSelectOptions } from '@/utils/common-interface'
import { taskReceiveStatusOptions } from '@/utils/common-select-data'
import { distributeTaskReceive, findTaskReceiveDetailPaging, completeTaskReceive } from '@/module-storage-in/api/task-receive'
import { ITaskReceiveTableData } from '@/module-storage-in/interface/task-receive'
import DistributeUserDialog from '@/components/base-allocation/index.vue'

@Component({
  name: 'ManageStorageInTaskReceive',
  components: {
    BaseButton,
    BasePagination,
    BaseListDialog,
    DistributeUserDialog
  }
})

export default class extends Vue {
    private taskReceiveStatusOptions:ICommonSelectOptions[] = []

    private tableData: ITaskReceiveTableData[] = []

    private searchParams = {
      code: '',
      ownerName: '',
      status: undefined
    }

    private paging = {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }

    private loading = false

    private distributeUserDialogData={
      id: 0,
      visible: false,
      name: ''
    }

    private personName = ''

    private batchDialogData={
      ids: [] as number[],
      title: '',
      subTitle: '',
      msg: '',
      itemList: [] as string[],
      visible: false,
      msgFailure: '',
      itemListFailure: [] as string[]
    }

    @Watch('$route', { immediate: true })
    private onRouteChange() {
      this.initData()
    }

    private initData() {
      this.taskReceiveStatusOptions = taskReceiveStatusOptions
      this.getList()
    }

    private handleCurrentChange(page:number) {
      this.paging.current = page
      this.getList()
    }

    private handleSizeChange(page:number) {
      this.paging.size = page
      this.paging.current = 1
      this.getList()
    }

    private getParams() {
      const current = this.paging.current
      const size = this.paging.size
      const params = {
        ...this.searchParams,
        current,
        size
      }
      if (!params.status) {
        delete params.status
      }
      return params
    }

    private async getList() {
      this.loading = true
      const params = this.getParams()
      const { data } = await findTaskReceiveDetailPaging(params)
      this.loading = false
      this.tableData = data.records
      this.paging.total = parseInt(data.total, 10)
    }

    private btnResetClick() {
      (this.$refs as any).ruleForm.resetFields()
      this.getList()
    }

    private handleSelectionChange(itemList:ITaskReceiveTableData[]) {
      this.batchDialogData.ids = itemList.map(item => {
        return item.id
      })
    }

    private filterHandler(value:any, row:any, column:any) {
      const property = column.property
      return row[property] === value
    }

    private btnTaskReceiveAddClick(id:number) {
      this.$router.push({ path: `task-receive/sure/${id}` })
    }

    private async handlesubmit() {
      const distributeUserDialogData = this.distributeUserDialogData
      if (!distributeUserDialogData.name) {
        this.$message.error('请选择分配')
      } else {
        const data = ((await distributeTaskReceive({
          id: distributeUserDialogData.id,
          receiverName: distributeUserDialogData.name
        })) as unknown) as ICommonReturn
        if (data.code === 0) {
          this.$message.success('分配成功')
          this.getList()
          this.distributeUserDialogData.visible = false
        } else {
          this.$message.error(data.msg)
        }
      }
    }

    private btnDistributeClick(id:number) {
      this.distributeUserDialogData.id = id
      this.distributeUserDialogData.visible = true
    }

    private async btnTaskReceiveFinishClick(ids:number[]) {
      if (ids.length > 0) { // 单条操作
        this.batchDialogData.ids = ids
      }
      const batchDialogData = this.batchDialogData
      if (batchDialogData.ids.length === 0) {
        this.$message.error('请选择收货任务')
      } else {
        this.batchDialogData = {
          ids: [] as number[],
          title: '生成收货任务',
          subTitle: '',
          msg: '',
          itemList: [] as string[],
          visible: false,
          msgFailure: '',
          itemListFailure: [] as string[]
        }
        const { data } = await completeTaskReceive(batchDialogData.ids)
        const errors = data.errors as string[]
        const results = data.results as string[]
        if (results.length > 0) {
          this.batchDialogData.msg = '收货任务编号如下，请在收货任务中查看'
          this.batchDialogData.itemList = results
          this.batchDialogData.subTitle = results.length + '个收货任务生成完成，已生成上架任务！'
        }

        if (errors.length > 0) {
          this.batchDialogData.msgFailure = '收货任务生成失败原因如下'
          this.batchDialogData.itemListFailure = errors
          this.batchDialogData.subTitle += (errors.length + '个收货任务生成失败！')
        }
        this.batchDialogData.visible = true
        this.getList()
      }
      (this.$refs.table as any).clearSelection()
    }

    private btnSureClick() {
      this.batchDialogData.visible = false
    }

    private btnViewDetail(id:number) {
      this.$router.push({ path: `task-receive/sure/${id}/detail` })
    }
}
</script>
<style lang="scss" scoped>
</style>
